<template>
  <div class="content">
    <!--<el-form class="f">-->
      <!--<v-form-title title="兴业电子账户"/>-->
      <!--<el-form-item label="执剑人账号密码">-->
        <!--账号：{{account.managerPhoneNumber}} -->
        <!--密码：{{intercept(account.corpNo)}}-->
      <!--</el-form-item>-->
      <!--<el-form-item label="执剑人用户号">{{temp.vAcctNo}}</el-form-item>-->
      <!--<el-form-item label="兴业电子账户号">{{temp.accountNumber}}</el-form-item>-->
      <!--<el-form-item label="可用余额">{{temp.freezeBalance}}</el-form-item>-->
      <!--<el-form-item label="交易中金额">{{temp.tradeBalance}}</el-form-item>-->
      <!--<el-form-item label="冻结金额">{{temp.freezeBalance}}</el-form-item>-->
    <!--</el-form>-->
    <el-row class="account_info">
      <el-row class="account_table">
        <div class="judge_account">
          <div class="account_title hpx-label">兴业户</div>
          <div class="account_data">
            <el-table
                    :data="xingye_bank"
                    style="width: 100%"
                    :cell-class-name="calcStyle">
              <el-table-column
                      prop="accountName"
                      label="银行名称">
                <template scope="scope">
                  123
                </template>
              </el-table-column>
              <el-table-column
                      property ="accountNo"
                      label="虚拟账户">
                <template scope="scope">
                  456
                </template>
              </el-table-column>
              <el-table-column
                      prop="blance"
                      label="账户余额">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="judge_account">
          <div class="account_title hpx-label">非兴业户</div>
          <div class="account_data">
            <el-table
                    :data="other_bank"
                    style="width: 100%"
                    :cell-class-name="calcStyle">
              <el-table-column
                      prop="accountName"
                      label="银行名称">
                <template scope="scope">
                  789
                </template>
              </el-table-column>
              <el-table-column
                      property ="accountNo"
                      label="虚拟账户">
                <template scope="scope">
                  963
                </template>
              </el-table-column>
              <el-table-column
                      prop="balance"
                      label="账户余额">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-row>
      <div class="judge_name">
        <el-row class="judge_name_inner">
          <el-row class="block_title row">123321</el-row>
          <el-row class="login_number">
            <el-row><span class="hpx-label">您的兴业数金执剑人账户登录名：</span><span>123</span></el-row>
            <el-row><span class="hpx-label">兴业数金执剑人账户初始密码：</span><span>123</span></el-row>
            <el-button type="primary" round>登录充值与提现</el-button>
          </el-row>
          <el-row class="block_tips row">
            <span class="tips_title"><i class="iconfont icon-tixing hpx-red-tips"></i> 温馨提示：</span>
            <span class="tips_content">执剑人账户余额可用于收票，只可提现至兴业银行账户；非兴业银行账户不可用于收票，只可提现至非兴业银行账户！</span>
          </el-row>
        </el-row>
      </div>
    </el-row>
    <el-row class="block_title row">
      <el-col :span="12">已绑账户：<span class="hpx-red-tips">1</span> 个</el-col>
      <el-col :span="12" class="right_top_btn">
        <el-button size="small"><i class="iconfont icon-tianjia"> 添加对公账户</i></el-button>
      </el-col>
    </el-row>
    <v-plain-dialog
            title="新增银行账户"
            width="40%"
            ref="addAcountDialog">
      <el-form label-width="100px">
        <el-form-item label="企业名称:">123</el-form-item>
        <el-form-item label="消息标题">
          <el-col :span="16" class="bank_input">
            <el-input type="number" placeholder="请输入企业银行帐号"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <p style="text-align: center;">
        <el-button type="primary" size="small">关闭</el-button>
        <el-button type="primary" size="small">提交</el-button>
      </p>
    </v-plain-dialog>
  </div>
</template>

<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'
  import vFormTitle from '@/components/form-title'
  import vPlainDialog from '@/components/plain-dialog'
  import vPlainTable from '@/components/plain-table'
  import { Getter } from 'vuex-class'

  @Component({
    components: {
      vFormTitle,
      vPlainDialog,
      vPlainTable
    }
  })
  export default class Base extends Vue {
    @Getter userInfo
    temp = {}
    account = {}

    xingye_bank = []
    other_bank = []
    async getXingYeAccount () {
      let res: AjaxResponse = await this.$axios.get(`g/gateway/account/user/${this.userInfo.userId}`)
      let resInfo: AjaxResponse = await this.$axios.get(`g/gateway/account/${res.data[0].id}`)
      let accountInfo: AjaxResponse = await this.$axios.get(`g/gateway/member/${this.userInfo.userId}`)
      this.temp = resInfo.data
      this.account = accountInfo.data
    }

    mounted () {
      this.getXingYeAccount()
    }
    intercept (str) {
      if(typeof str!="undefined"){
        return str.substr(str.length-6)
      }
    }

    calcStyle ({column,row}) {
      if(column.label == '账户余额'){
        return 'red'
      }
    }
  }
</script>

<style lang="less" scoped>
  /*.f {*/
    /*width: 1180px;*/
    /*margin: 0 auto;*/
    /*padding-top: 60px;*/
  /*}*/
  .content {
    padding-top: 60px;
  }
  .row{
    font-weight: Bold;
    color: #5D617B;
    position: relative;
    box-sizing: border-box;
  }
  .block_tips{
    font-size: 16px;
    line-height: 22px;
    margin-top: 15px;
    span{
      display: block;
      float: left;
      // line-height: 22px;
      // margin: 22px 0;
    }
    .tips_title{
      width: 102px;
    }
    .tips_content{
      font-weight: 500;
      font-size: 14px;
      width: calc(100% - 102px);
    }
  }
  .add_bank_dialog{
    .bank_input{
      width: 320px;
    }
    .bank_btn{
      margin-left: 12px;
    }
    .text_center{
      margin-left: 105px;
      text-align: left;
      .el-button:nth-child(2){
        margin-left: 16px;
      }
    }
  }
  .verify_bank_dialog{
    .el-dialog__body{
      .el-col{
        width: 320px;
      }
    }
    .el-dialog__footer{
      .reminder-dialog-footer{
        .el-button:nth-child(2){
          margin-left: 16px;
          height: 36px;
        }
      }
    }
  }
  .block_title{
    font-size: 18px;
    line-height: 45px;
  }
  .account_info{
    min-height: 314px;
    background-color: #F5F7FA;
    margin-bottom: 40px;
    position: relative;
    .account_table{
      width: 35%;
      float: left;
      .judge_account{
        width: 100%;
        border: 1px dashed #D2D2D6;
        box-sizing: border-box;
        display: flex;
        min-height: 152px;
        &:first-child{
          margin-bottom: 10px;
        }
        .el-table{
          .el-table__header-wrapper{
            tr{
              background-color: #F5F7FA !important;
            }
          }
        }
      }
    }
  }
  .account_title{
    float: left;
    width: 40px;
    min-height: 152px;
    font-size: 18px;
    writing-mode: vertical-lr;
    background-color: #fff;
    text-align: center;
    line-height: 40px;
    border-left: 4px solid #4E93FF;
    border-right: 0.5px solid #E8E8EA;
  }
  .account_data{
    width: calc(100% - 45px);
    float: right;
    background: #fff;
  }
  .judge_name{
    position: absolute;
    .judge_name_inner{
      padding: 0 35px;
      height: 100%;
    }
    width: calc(65% - 100px);
    height: 274px;
    top: 50%;
    right: 50px;
    margin-top: -137px;
    background-color: #fff;
    .block_title{
      height: 25px;
      line-height: 25px;
      margin: 20px 0;
    }
    .login_number{
      font-size: 16px;
      height: 154px;
      border-bottom: 1px solid #E8E8EA;
      .el-row{
        height: 22px;
        line-height: 22px;
        margin-bottom: 10px;
      }
      .el-button{
        margin-top: 20px;
        box-shadow:2px 2px 10px 0px rgba(78,147,255,0.5);
      }
    }
    .block_tips{
      // position: absolute;
      // bottom: 0;
      // margin-bottom: 0;
    }
  }

  .right_top_btn{
    // display: flex;
    // justify-content: flex-end;
    text-align: right;
    button{
      border: 1px solid #4278FF;
      background: rgba(255,255,255,1);
      color: #4E93FF;
    }
  }
  .accountList{
    border-top:  1px solid #FEB307;
  }
  .el-table tr{
    height: 50px !important;
  }
  @media (max-width: 1400px) {
    .judge_name{
      width: calc(65% - 60px);
      right: 30px;
      .judge_name_inner{
        padding: 0 15px;
      }
    }
  }
  .rem-dialog-con.text_left{
    color: #1C1F33;
    font-size: 14px;
    .el-row{
      line-height: 32px;
    }
  }
  .text_center{
    text-align: center;
  }
  .dialog-footer{
    div:first-child{
      width: 100px;
      float: left;
      text-align: left;
    }
    div:nth-child(2){
      width: 420px;
      float: left;
      font-size: 14px;
      text-align: left;
      line-height: 20px;
    }
    .block_title{
      line-height: normal;
    }
    .red{
      color: #E84F5A;
    }
  }
  .defult_account{
    display: inline-block;
    width: 86px;
    height: 24px;
    background-color: #FFFBF2;
    color: #FEB307;
    line-height: 24px;
    text-align: center;
    font-size: 14px;
    border-radius: 50px;
  }
  .warm_box_account {
    justify-content: left;
    margin-top: 10px;
    margin-bottom: 10px;
  }

</style>
